<template>
  <div class="user-header">
    <img :src="imgPath"
         alt=""
         :style="{borderRadius: (shapeType == 'round' ? '1rem' : '0.1rem')}">
    <li>
      <span>{{ name }}</span>
      <span>{{ description }}</span>
    </li>
  </div>
</template>

<script>
export default {
  props: {
    imgPath: {
      type: String,
      default: require('@/assets/image/default_img.png')
    },
    shapeType: {
      type: String,
      default: 'round'
    },
    name: {
      type: String,
      default: '我就是那个小可爱'
    },
    description: {
      type: String,
      default: '2020-10-12 11:32'
    }
  },
  data () {
    return {
    };
  },
  created () { },
  methods: {}
}

</script>
<style lang='scss' scoped>
.user-header {
  display: flex;
  align-items: center;
  img {
    height: 0.8rem;
    width: 0.8rem;
    margin-right: 0.2rem;
  }
  li {
    @include flex-column;
    span {
      &:first-child {
        margin-bottom: 0.1rem;
        font-size: 0.26rem;
        color: #131313;
      }
      &:last-child {
        font-size: 0.22rem;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #aeaeae;
      }
    }
  }
}
</style>